<template>
  <view class="page-container">
    <view class="header-container flex justify-between items-center">
       <view class="provider-basic-info">
         <view class="provider-name ">{{providerInfo.name}}</view>
         <view class="divider-container"></view>
         <text class="register-container" v-if="providerInfo.entreDate">{{providerInfo.entreDate}}</text>
       </view>
      <view class="customer-service flex items-center" @click="handlerCallPhone">
        <wd-icon name="service" size="25px" color="#1b9c61"></wd-icon>
        <text class="ml10 fs12-half">联系商家</text>
      </view>
    </view>
    <view class="location-container flex items-center" @click="handlerOpenMap">
      <i class="iconfont icon-a-jinrudituquandidingweiweizhi"></i>
      <text>{{providerInfo.address}}</text>
    </view>
    <view class="qualification-container">
      <view vif="providerInfo.attaches && providerInfo.attaches.length > 0">
        <wd-img
            v-for="(item,index) in providerInfo.attaches"
            :key="index"
            mode="widthFix"
            :src="item.fileUrl"
            :enable-preview="true"
            custom-class="custom-img-class"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
  import {ref} from "vue";

  const providerInfo = ref();

  const handlerCallPhone = () => {
    if(!providerInfo.value.contactMobile) {
      uni.showToast({
        icon: "none",
        title: "该商家暂无线上联系电话"
      });
      return;
    }
    uni.makePhoneCall({
      phoneNumber:providerInfo.value.contactMobile
    })
  };
  const handlerOpenMap = () => {
    uni.openLocation({
      latitude: providerInfo.value.lat,
      longitude: providerInfo.value.lnt,
      name: providerInfo.value.name
    });
  };

  onLoad((options) => {
    let {providerInfo:_providerInfo} = options;
    providerInfo.value = JSON.parse(decodeURIComponent(_providerInfo));
    console.log(providerInfo,'providerInfo');
    uni.setNavigationBarTitle({
      title: providerInfo.value.name
    });
  });
</script>

<style lang="scss" scoped>
  .page-container {
    padding: 60.5rpx 18.5rpx;
    min-height: 100vh;
    background-color: #fdffeb;
    .header-container {
      .provider-name {
        font-size: 39rpx;
        font-weight: bold;
        color: #2B2B24;
      }
      .divider-container {
        height: 10rpx;
      }
      .register-container {
        font-size: 25rpx;
        border-radius: 10rpx;
        padding: 7.5rpx 6rpx;
        border: 1rpx solid #1B9C61;
        color: #1B9C61;
      }
    }
    .location-container {
      margin-top: 25.5rpx;
      .icon-a-jinrudituquandidingweiweizhi {
        color: #1b9c61;
        font-size: 40rpx;
      }
      text {
        font-size: 25rpx;
        margin-left: 7rpx;
      }
    }
    .qualification-container {
      border-radius: 10rpx;
      margin-top: 38rpx;
      padding: 20rpx;
      background: #FFFFFF;
      :deep(.custom-img-class) {
        width: 100%;
        height: 100%;
        background-color: red;
      }
    }
  }
</style>
